<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/animate4.1.1.min.css">
    <link rel="stylesheet" href="../../css/swiper-bundle.css">
    <link rel="stylesheet" href="../../css/LongTermCreation.css">
    <link rel="stylesheet" href="../../css/Head.css">
    <link rel="stylesheet" href="../../css/Admin.css">
    <title>长远创造</title>
</head>
<body>
<div id="App">
    <div id="Head">
        <div>
            <div class="head">
                <a @click="AdminLoginishow">
                    <img src="../../img/Logo.svg">
                </a>
                <!--大标题-->
                <ul>
                    <a v-for="(item,index) in headlineS">
                        <li @click="skip(index)"
                            :class="head_ul_li_hover==index?'head_ul_li_hover':''" :key="index">{{ item }}
                        </li>
                    </a>
                    <li class="nav-box" :class="nav_boxClass[head_ul_li_hover]"></li>
                </ul>
                <!-- 显示隐藏 小标题按钮     -->
                <div @click="hiddenBox =!hiddenBox" ref="btn-wrap" class="btn-wrap">
                    <p v-for="item in 3" :class="hiddenBox?btnWrapClass[item-1]:''" :key="item-1"></p>
                </div>
            </div>
            <!--小标题-->
            <transition-group
                    name=" animate__animated  "
                    enter-active-class="animate__fadeIn"
                    leave-active-class="animate__fadeOut">

                <div class="hiddenBox" v-show="hiddenBox" key="1">
                    <ul>
                        <a v-for="(item,index) in headlineS">
                            <li @click="skip(index)"
                                :class="head_ul_li_hover==index?'hiddenBoxLiHous':''" :key="index">{{ item }}
                            </li>
                        </a>
                    </ul>
                </div>
            </transition-group>
        </div>


    </div>

    <div class="LongTermCreation">
        <div class="swiper-wrapper">
            <!--1-->
            <div class="swiper-slide LongTermCreation_S1">

                <div class="LongTermCreation_PC">
                    <div class="PC_D1">
                        <div class="PC_D1_D">
                            <h1>实习宝</h1>
                            <div class="PC_D1_D1">
                                <p>“实习宝”是一款专业的企业实践管理系统 ，借助5G时代和高速发展的软件技术，为学
                                    生和指导老师提供了统一便捷的协作平台。</p>
                                <p>本项目对职业教育中学生的实习期进行了全 流程化管理，以方便高效为目标，以解决实
                                    际问题为己任，以数字化发展为契机开启职 业教育数字赋能之路。</p>
                                <p>本项目深入实习一线调研，功能直击实习痛 点，可大幅度提升技工院校实习管理团队的
                                    工作效率，辅助未来决策，具有极高的推广 应用价值。</p>
                            </div>
                            <div class="PC_D1_D2">
                                <div class="PC_D1_D2_sw">
                                    <ul class="swiper-wrapper">
                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>
                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>
                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>
                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>
                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>
                                    </ul>
                                </div>

                                <div class="PC_D1_D12_Long">
                                    <img src="../../img/b创造奖杯图标.png">
                                </div>

                            </div>

                            <div class="PC_D1_D3">
                                <ul>
                                    <li>
                                        <img src="../../img/b创造实习宝教师端.png">
                                        教师端
                                    </li>
                                    <li>
                                        <img src="../../img/b创造实习宝学生端.png">
                                        学生端
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="PC_D2">
                        <div class="PC_D2_b">
                            <video controls>
                                <source src="../../img/官网视频M.mp4">
                            </video>
                        </div>
                    </div>
                </div>

                <div class="LongTermCreation_Mobile">
                    <h1>
                        <img height="150%" src="../../img/b创造long1.png">
                        实习宝
                    </h1>
                    <div class="LongTermCreation_Mobile_D1">
                        <p>“实习宝”是一款专业的企业实践管理系统 ，借助5G时代和高速发展的软件技术，为学
                            生和指导老师提供了统一便捷的协作平台。</p>
                        <p>本项目对职业教育中学生的实习期进行了全 流程化管理，以方便高效为目标，以解决实
                            际问题为己任，以数字化发展为契机开启职 业教育数字赋能之路。</p>
                        <p>本项目深入实习一线调研，功能直击实习痛 点，可大幅度提升技工院校实习管理团队的
                            工作效率，辅助未来决策，具有极高的推广 应用价值。</p>
                    </div>

                    <div class="LongTermCreation_Mobile_D2">
                        <ul class="LongTermCreation_Mobile_D2_U1">
                            <li>
                                <p>荣誉</p>
                                <p>证书</p>
                            </li>
                            <li>
                                <p>扫码</p>
                                <p>体验</p>
                            </li>
                            <li>
                                <p>全屏</p>
                                <p>播放</p>
                            </li>
                        </ul>

                        <div class="LongTermCreation_Mobile_D2_V">
                            <video controls>
                                <source src="../../img/官网视频M.mp4">
                            </video>
                        </div>
                    </div>


                </div>

            </div>
            <!--1-->

            <!--2-->
            <div class="swiper-slide LongTermCreation_S2">

                <div class="LongTermCreation_PC">
                    <div class="PC_D1">
                        <div class="PC_D1_D">
                            <h1>A+牧草迷宫</h1>
                            <div class="PC_D1_D1">
                                <p>【牧草迷宫】坐落在广东省中山市五桂山🌿 ，占地面积4万平方米。迷宫路径曲折迂回，
                                    身在其中，放眼皆是绿野，身心舒畅。穿梭 在牧草之间，不仅感受大自然的清新气息，
                                    还颇具挑战性！</p>
                                <p> “A+牧草迷宫”小程序顺应需求，应时而生 ，帮助园区负责人快速生成景点打卡二维码
                                    ，玩家通过寻找“迷宫”中的打卡点，用手 机扫描二维码进行打卡，并进行实时显示，
                                    其时间最短的玩家将获得园区奖励.</p>
                                <p> “A+牧草迷宫”后台管理系统，简洁明快的 同时管理多个项目，并能实时的精确的查看
                                    玩家进度以及排名！</p>
                            </div>
                            <div class="PC_D1_D2">
                                <div class="PC_D1_D2_D">
                                    合同或使用证明
                                </div>

                                <div class="PC_D1_D12_Long">
                                    <img src="../../img/b创造合同图标.png">
                                </div>

                            </div>


                        </div>
                    </div>
                    <div class="PC_D2">
                        <div class="LongTermCreation_S2_PC_D2_1">
                            <img class="LongTermCreation_S2_PC_D2_1_img1" src="../../img/b创造2电脑.png" alt="">
                            <img class="LongTermCreation_S2_PC_D2_1_img2" src="../../img/a首页2手机2.png" alt="">
                        </div>
                    </div>
                </div>


                <div class="LongTermCreation_S2_Mobile">

                    <div class="LongTermCreation_S2_Mobile_headline">
                        <img src="../../img/b创造long2.png">
                        <h1>A+牧草迷宫</h1>
                    </div>

                    <div class="LongTermCreation_S2_Mobile_D">
                        <ul>
                            <li>
                                <p>项目</p>
                                <p>介绍</p>
                            </li>
                            <li>
                                <p>使用</p>
                                <p>合同</p>
                            </li>
                            <li>
                                <p>扫码</p>
                                <p>体验</p>
                            </li>
                        </ul>

                        <div class="LongTermCreation_S2_Mobile_D_Swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../../img/a首页2手机2.png">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../../img/a首页2手机1.png">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../../img/a首页2手机3.png">
                                </div>


                            </div>
                        </div>
                    </div>

                    <div class="LongTermCreation_S2_Mobile_img">
                        <img src="../../img/b创造2电脑.png">
                    </div>


                </div>

            </div>
            <!--2-->

            <!--3-->
            <div class="swiper-slide LongTermCreation_S3">

                <div class="LongTermCreation_PC">
                    <div class="PC_D1">
                        <div class="PC_D1_D">
                            <h1>雏鹰</h1>
                            <div class="PC_D1_D1">
                                <p>【牧草迷宫】坐落在广东省中山市五桂山🌿 ，占地面积4万平方米。迷宫路径曲折迂回，
                                    身在其中，放眼皆是绿野，身心舒畅。穿梭 在牧草之间，不仅感受大自然的清新气息，
                                    还颇具挑战性！</p>
                                <p> “A+牧草迷宫”小程序顺应需求，应时而生 ，帮助园区负责人快速生成景点打卡二维码
                                    ，玩家通过寻找“迷宫”中的打卡点，用手 机扫描二维码进行打卡，并进行实时显示，
                                    其时间最短的玩家将获得园区奖励.</p>
                                <p> “A+牧草迷宫”后台管理系统，简洁明快的 同时管理多个项目，并能实时的精确的查看
                                    玩家进度以及排名！</p>
                            </div>
                            <div class="PC_D1_D2">
                                <div class="PC_D1_D2_sw">
                                    <ul class="swiper-wrapper">
                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>
                                    </ul>
                                </div>

                                <div class="PC_D1_D12_Long">
                                    <img src="../../img/b创造奖杯图标.png">
                                </div>

                            </div>

<!--                            <div class="PC_D1_D3">-->
<!--                                <ul>-->
<!--                                    <li>-->
<!--                                        <img src="../../img/b创造3牧草迷宫.png">-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->

                        </div>
                    </div>
                    <div class="PC_D2">
                        <div class="PC_D2_b">
                            <video controls>
                                <source src="../../img/官网视频M.mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="LongTermCreation_Mobile">
                    <h1>
                        <img height="150%" src="../../img/b创造long3.png">
                        雏鹰
                    </h1>
                    <div class="LongTermCreation_Mobile_D1">
                        <p>
                            “雏鹰”是一款专业的学生成长激励系统，为所有老师提供统一的学生记分平台，为学生和家长提供统一的纵览学生成长历程平台。一键动态生成图表，从多维度综合评价学生在校情况，对控制流失能起到积极作用，学生评优评先更加客观公平，对学生有较强的激励作用。
                        </p>
                        <p>主要创新点</p>
                        <p>1、智能预测异动学生</p>
                        <p>2、教学线与学管线,双线合力,教学与育人并举</p>
                        <p>3、学生成长历程完整,随时可查 </p>
                        <p>4、学生荣誉系统,给予学生充足的成就感</p>
                    </div>

                    <div class="LongTermCreation_Mobile_D2">
                        <ul class="LongTermCreation_Mobile_D2_U1">
                            <li>
                                <p>荣誉</p>
                                <p>证书</p>
                            </li>
                            <li>
                                <p>扫码</p>
                                <p>体验</p>
                            </li>
                            <li>
                                <p>全屏</p>
                                <p>播放</p>
                            </li>
                        </ul>

                        <div class="LongTermCreation_Mobile_D2_V">
                            <video controls>
                                <source src="../../img/官网视频M.mp4">
                            </video>
                        </div>
                    </div>


                </div>
            </div>
            <!--3-->

            <!--4-->
            <template>


<!--            <div class="swiper-slide LongTermCreation_S4">-->
<!--                <div class="LongTermCreation_PC">-->
<!--                    <div class="PC_D1">-->
<!--                        <div class="PC_D1_D">-->
<!--                            <h1>本页先不做</h1>-->
<!--                            <div class="PC_D1_D1">-->
<!--                                <p>【牧草迷宫】坐落在广东省中山市五桂山🌿 ，占地面积4万平方米。迷宫路径曲折迂回，-->
<!--                                    身在其中，放眼皆是绿野，身心舒畅。穿梭 在牧草之间，不仅感受大自然的清新气息，-->
<!--                                    还颇具挑战性！</p>-->
<!--                                <p> “A+牧草迷宫”小程序顺应需求，应时而生 ，帮助园区负责人快速生成景点打卡二维码-->
<!--                                    ，玩家通过寻找“迷宫”中的打卡点，用手 机扫描二维码进行打卡，并进行实时显示，-->
<!--                                    其时间最短的玩家将获得园区奖励.</p>-->
<!--                                <p> “A+牧草迷宫”后台管理系统，简洁明快的 同时管理多个项目，并能实时的精确的查看-->
<!--                                    玩家进度以及排名！</p>-->
<!--                            </div>-->
<!--                            <div class="PC_D1_D2">-->
<!--                                <div class="PC_D1_D2_sw">-->
<!--                                    <ul class="swiper-wrapper">-->
<!--                                        <li class="swiper-slide"><img src="../../img/b创造奖状.png"></li>-->
<!--                                    </ul>-->
<!--                                </div>-->

<!--                                <div class="PC_D1_D12_Long">-->
<!--                                    <img src="../../img/b创造奖杯图标.png">-->
<!--                                </div>-->

<!--                            </div>-->

<!--                            <div class="PC_D1_D3">-->
<!--                                <ul>-->
<!--                                    <li>-->
<!--                                        <img src="../../img/b创造3牧草迷宫.png">-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="PC_D2">-->
<!--                        <div class="LongTermCreation_S4_PC_D2_S">-->
<!--                            <div class="swiper-wrapper">-->
<!--                                <div class="swiper-slide">-->
<!--                                    <img src="../../img/a首页2手机3.png">-->
<!--                                </div>-->
<!--                                <div class="swiper-slide">-->
<!--                                    <img src="../../img/a首页2手机1.png">-->
<!--                                </div>-->
<!--                                <div class="swiper-slide">-->
<!--                                    <img src="../../img/a首页2手机2.png">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->


<!--            </div>-->
            </template>
            <!--4-->
        </div>
        <div class="LongTermCreation-pagination">
            <ul>
                <li><img style="width: 150%" src="../../img/b创造long1.png"></li>
                <li><img src="../../img/b创造long2.png"></li>
                <li><img src="../../img/b创造long3.png"></li>

<!--                <li><img src="../../img/b创造long4.png"></li>-->
            </ul>
        </div>
    </div>

    <div class="AdminLogin">
        <div class="AdminLogin_From animate__animated animate__fadeInUp">
            <div class="AdminLogin_From_close AdminLoginishow"></div>
            <h1>管理员登录</h1>
            <input type="text" placeholder="学号:">
            <input type="text" placeholder="密码:">
            <button>登录</button>
        </div>
    </div>

</div>
<script src="../../js/jquery_3.6.4.js"></script>
<script src="../../js/swiper-bundle.js"></script>
<script src="../../js/vue-v2.7.13.js"></script>
<script src="../../js/LongTermCreation.js"></script>
<script src="../../js/BrowserCompatibility.js"></script>
</body>
</html>